<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8"/>

        <title>Basic shapes</title>

        <link rel="stylesheet" type="text/css" href="../../build/joint.css" />

        <style>
            #paper {
                display: inline-block;
                border: 1px solid gray;
            }

			/* Experimental CSS animation of link connection paths stroke. */
			.connection {
				-webkit-animation: draw 3s infinite;
				-moz-animation: draw 3s infinite;
				animation: draw 3s infinite;
				stroke-dashoffset: 10;
				stroke-dasharray: 5 8;
			}

			@-webkit-keyframes draw {
				50% {
					stroke-dashoffset: 200px;
				}
			}
			@-moz-keyframes draw {
				50% {
					stroke-dashoffset: 200px;
				}
			}
			@keyframes draw {
				50% {
					stroke-dashoffset: 200px;
				}
			}

			.joint-available-magnet { fill: blue; }
        </style>
    </head>
    <body>

        <div id="paper"></div>

        <!-- Dependencies: -->
        <script src="../../node_modules/jquery/dist/jquery.js"></script>
        <script src="../../node_modules/lodash/lodash.js"></script>
        <script src="../../node_modules/backbone/backbone.js"></script>

        <script src="../../build/joint.js"></script>

        <script src="./basic.js"></script>

    </body>
</html>
